<link rel="stylesheet" href="/cn/css/exerciseNew/speakDetail.css?v=1.3">
<script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>

<section id="exerciseDetail" v-cloak>
    <!-- 顶部 -->
    <div class="headNav">
        <template>
            <div class="w12 headContent">
                <div class="headTitle">{{questionData!=''?questionData.parent.name:''}}</div>
                <div class="clockTime">
                    <img src="/cn/images/exerciseNew/15@2x.png" alt="">
                    <span>{{time}}</span>
                </div>
                <div class="operateBtn">
                    <a href="/cn/exercise/speak?category=all" class="upData">退出</a>
                    <a href="javascript:void(0)" class="upData" @click="saveAnswer">SUBMIT</a>
                    <img src="/cn/images/exerciseNew/16@2x.png" alt="" class="fullScreen" @click="launchFullscreen">
                </div>
            </div>
        </template>
    </div>

    <input name="pid" value="<?php echo $pid ?>" type="hidden" id="pid">
    <input name="content_id" value="<?php echo $content_id ?>" type="hidden" id="content_id">

    <!-- 做题部分 -->
    <div class="exerciseCenter">
        <div class="speakTitle" v-html="questionData.son[0].description" v-if="questionData!=''"></div>
        <!--        <div class="speakTitle" >{{questionData!=''?questionData.son[0].description:''}}</div>-->
        <!-- 开始答题 -->
        <input name="token" value="12345" type="hidden" id="token"><!--随机生成的token!!!!!!!!!!-->
        <div class="startCover" v-cloak v-show="recordStatus == -1">
            <a href="javascript:void (0)" class="startBtn" @click="startRecord" id="start-btn">
                <img src="/cn/images/exerciseNew/26.png" alt="">
            </a>
            <p class="speakTip">点击录音开始答题哦</p>
        </div>
        <!-- 音频设备提醒 -->
        <div class="equipTip" v-cloak v-if="isEquip">
            <div class="equipTipCenter">
                <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip"
                     @click="isEquip = false,recordStatus = -1">
                <p class="equipText">系统检测到您的电脑麦克风音频未开启，<br>
                    请检查音频情况！</p>
                <div class="equipBtnCover">
                    <a href="javascript:void(0)" class="continueBtn" @click="isEquip = false,recordStatus = -1">继续做题</a>
                    <a href="javascript:void(0)" class="qdBtn" @click="isEquip = false,recordStatus = -1">确定</a>
                </div>
            </div>
        </div>
        <!-- 录音中 -->
        <div class="recordingCover" v-cloak v-show="recordStatus == 0||recordStatus == 1">
            <a href="javascript:void (0)" class="stopBtn" @click="stopRecord" title="停止录音" id="close-btn">
                <img src="/cn/images/exerciseNew/27.png" alt="">
            </a>
            <!-- 声音波浪 -->
            <canvas id="waves"></canvas>
            <!--            <img src="/cn/images/exerciseNew/28.png" alt="" class="wave">-->
        </div>
        <!-- 录音完成 -->
        <div class="recordOver" v-cloak v-show="recordStatus == 2 || recordStatus == 4">
            <!-- 未上传 -->
            <div v-if="recordStatus!=4">
                <p class="againTip">点击按钮可重新答题</p>
                <a href="javascript:void (0)" class="startBtn" @click="againAsk = true">
                    <img src="/cn/images/exerciseNew/26.png" alt="">
                </a>
            </div>
            <!-- 上传成功 -->
            <div v-if="recordStatus==4" style="text-align: center;">
                <img src="/cn/images/exerciseNew/29.png" alt="" style="width: 102px;">
                <p class="upSuccess">上传成功!</p>
            </div>
            <div class="operateBtnCover">
                <!-- 音频地址 浏览器录音临时地址用于播放-->
                <audio id="bgAudio" ref="audioPlayer" controls></audio>
                <p>你的答案：</p>
                <div class="audioCover">
                    <a href="javascript:void(0)" class="playBtn" v-if="!isPlay" @click="playAudio">
                        <img src="/cn/images/exerciseNew/17@2x.png" alt="">
                    </a>
                    <a href="javascript:void(0)" class="pauseBtn" v-if="isPlay" @click="playAudio">
                        <img src="/cn/images/exerciseNew/stop.png" alt="">
                    </a>
                    <p class="time">{{currentTime}}/{{totalTime}}</p>
                </div>
                <!-- 未上传 -->
                <a href="javascript:void(0)" class="upLoadBtn" @click="upload" v-if="recordStatus!=4&&recordStatus!=3">上传</a>
                <!-- 上传中 -->
                <a href="javascript:void(0)" class="upLoadBtn" v-if="recordStatus == 3">上传中</a>
                <!-- 上传成功 -->
                <a href="javascript:void(0)" class="upLoadBtn" @click="againAsk = true" v-if="recordStatus==4">重录</a>
            </div>
        </div>
        <!--  进去下一题 未上传提示 -->
        <div class="equipTip noUpload">
            <div class="equipTipCenter">
                <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip" @click="closePop">
                <p class="equipText">录音还未上传，<br>
                    确定要去下一题吗？</p>
                <div class="equipBtnCover">
                    <a href="javascript:void(0)" class="continueBtn" @click="closePop">确定</a>
                    <a href="javascript:void(0)" class="qdBtn" @click="closePop">没有</a>
                </div>
            </div>
        </div>
        <!-- 重新答题提示 -->
        <div class="equipTip" v-cloak v-if="againAsk">
            <div class="equipTipCenter">
                <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip" @click="againAsk = false">
                <p class="equipText">是否重新开始答题</p>
                <div class="equipBtnCover">
                    <a href="javascript:window.location.reload()" class="next">确定</a>
                    <a href="javascript:void(0)" class="qdBtn" @click="againAsk = false">没有</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footNav">
        <div class="footNavCover">
            <a href="javascript:void(0)" class="reviewBtn" @click="reviewStatus">
                REVIEW
                <div class="reviewPop">
                    不确定答案，可随时review，方便再次检查（选中review后题号会变成圆形）
                </div>
            </a>
            <div class="quesNumCover">
                <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                <a href="javascript:void(0)"
                   :class="{'quesNum':index>-1, 'fulfil': item.isDo == 1, 'notSure': item.status == 1, 'doNow': item.content_id == p_id }"
                   v-for="(item,index) in questionData.question_list" @click="goNew(item.content_id)"
                   @mouseover="followIn($event)" @mouseout="followOut($event)">{{index+1}}</a>
                <!-- 提示 跟随按钮位置-->
                <div class="quesPop" :style="{display:display,left:left}" v-cloak>
                    <p>白色：已答题</p>
                    <p>灰色：未答题</p>
                    <p>紫色：答题中</p>
                </div>
            </div>
            <div class="turnBtn">
                <a href="javascript:void(0)" class="prevBtn" @click="prev">
                    <img src="/cn/images/exerciseNew/18@2x.png" alt="">
                    <span>上一题</span>
                </a>
                <a href="javascript:void(0)" class="nextBtn" @click="next">
                    <img src="/cn/images/exerciseNew/19@2x.png" alt="">
                    <span>下一题</span>
                </a>
            </div>
        </div>
    </div>
    <input type="hidden" value="" id="accuracy_score">
    <input type="hidden" value="" id="phone_score">
    <input type="hidden" value="" id="speeking_speed">
    <input type="hidden" value="" id="total_score">
    <input type="hidden" value="" id="sentence">
</section>


<script src="/cn/js/exerciseNew/wave.js?v=1.1"></script>
<script src="/cn/js/exerciseNew/speakDetail.js?v=1.4"></script>
<script src="/cn/js/automatic/crypto-js.min.js"></script>
<script src="/cn/js/automatic/base64js.js"></script>
<script src="/cn/js/automatic/voice.js"></script>
<script src="/cn/js/automatic/voice2.js"></script>
<script>
    window.onload = function () {
        const startBtn = document.querySelector('#start-btn');
        const voiceTxt = document.querySelector('#sentence');
        const closeBtn = document.querySelector('#close-btn');
        let times = null;

        // 实例化迅飞语音听写（流式版）WebAPI
        const voice2 = new Voice2({

            // 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
            appId: '5ec244d5',
            apiSecret: '37912e3e3f205e2a6201ec290452470a',
            apiKey: '78b6c006f1f3df5e24d315e3dff09212',
            // 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】


        });
        // 实例化迅飞语音听写（流式版）WebAPI
        const voice = new Voice({
            // 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
            appId: '5ec244d5',
            apiSecret: '37912e3e3f205e2a6201ec290452470a',
            apiKey: '78b6c006f1f3df5e24d315e3dff09212',
            // 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】

            onWillStatusChange: function (oldStatus, newStatus) {
                //可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
            },
            onTextChange: function (text) {
                //监听识别结果的变化
                voiceTxt.value = text;

            }
        });

        // 开始识别
        startBtn['onclick'] = function () {
            console.log('onclick');
            voice2.start();
            voice.start();

        };


        // 关闭识别
        closeBtn['onclick'] = function () {
            voice2.stop();
            voice.stop();

        };


    };


</script>


